<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style type="text/css">
        body{
            margin: 0;
            overflow: hidden;
            width: 100%;
            height:100%;
            position: absolute;
            top: 0;
        }
        .map{
            margin:0 auto;
            width: 100%;
            height:100%;
            position: absolute;
        }
        body {
            text-align: center;
            margin: 0px;
            padding: 0px;
            font-family: "微软雅黑";
        }
        .css_animation{
            height:35px;
            width:35px;
            border-radius: 30px;
            background: rgba(255, 0, 0, 1);

            transform: scale(0);
            animation: overlay 3s;
            animation-iteration-count: infinite;
        }

        @keyframes overlay{
            to{
                transform: scale(2);
                background: rgba(0, 0, 0, 0);
            }
        }
        .chart{
            width: 100px;
            height:100px;
            /*background-color: #5cb85c;*/
        }
    </style>
</head>
<body>
<!--
<div style="display: none;">
<div id='canvasDiv' style="width: 250px;height:150px;background-color: #5cb85c"></div>
</div>-->
<div id="map" class="map"></div>
<a id="export-png" class="btn btn-default"><i class="fa fa-download"></i> Download PNG</a>
</body>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/libs/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/libs/echarts.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/spatial/js/hbgis.js?key=3c4c1fe05b125209f9a50f00708097fbf73ba920449bde6f051a0d66f2f6997b"></script>
<script type="text/javascript">
    var test = {
        showData:function (data) {
            console.log("=====================");
            console.log(data);
            console.log("=====================");
        }
    }
    function getPuctureByAQI (aqi) {

    }
    function getPucture (puctures) {
        var value, pucture = "../static/spatial/images/enterprise/";
        if (puctures == null || puctures == "") {
            pucture += "0.png";
            return pucture;
        }
        value = puctures;

        if (value.indexOf('31') == 0) {
            pucture += "31.png";
        } else if (value.indexOf('4411') == 0 || value.indexOf('44') == 0) {
            pucture += "44.png";
        } else if (value.indexOf('19') == 0) {
            pucture += "19.png";
        }
        else if (value.indexOf('30') == 0) {
            pucture += "30.png";
        }
        else if (value.indexOf('07') == 0 || value.indexOf('26') == 0) {
            pucture += "26.png";
        }
        else if (value.indexOf('32') == 0) {
            pucture += "32.png";
        } else if (value.indexOf('22') == 0) {
            pucture += "22.png";
        } else if (value.indexOf('17') == 0) {
            pucture += "17.png";
        } else if (value.indexOf('25') == 0) {
            pucture += "25.png";
        }
        else if (value.indexOf('4620') == 0) {
            pucture += "zc_wsc.png";
        }
        else {
            pucture += "0.png";
        }
        return pucture;
    }

    function showChart() {
        var childregions = $.data(dataCache, 'childregions'),reginCode,chartDiv,pie,chartDivs = {};
        var option = {
            grid:{
                top:'2%',
                bottom:'2%',
                right:'2%'
            },
            yAxis: {
                show:false
            },
            tooltip: {},
            xAxis: {
                show:false,
                data: ["二氧化硫","氮氧化物","颗粒物"]
            },
            series: [{
                name: '排放量',
                type: 'pie',
                data: [5, 20, 36],
                labelLine:{
                    show:false
                }
            }]
        };

        gis.addLayerFromFeatures('regionLayer',childregions,function (feature) {
            return new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'blue',
                    lineDash: [4],
                    width: 1
                }),
                fill: new ol.style.Fill({
                    color: 'rgba(0, 0, 255, 0)'
                })
            })
        });





        for(var i = 0,len = childregions.length;i < len;i++){
            reginCode = childregions[i].getProperties()['reginCode'];
            chartDiv = document.createElement("div");
            chartDiv.setAttribute("id", reginCode);
            chartDiv.setAttribute("class", "chart");
            chartDivs[reginCode] = chartDiv;

            pie = new ol.Overlay({
                id:"chart_" + reginCode,
                position: ol.extent.getCenter(childregions[i].getGeometry().getExtent()),
                positioning: 'center-center',
                element: chartDiv
            });
            gis.mainMap.addOverlay(pie);

            echarts.init(chartDiv).setOption(option);
        }

        gis.zoomMapByVectorLayer('regionLayer',null);

    }


    gis = new C3GIS('3a5827f9-a5b2-4056-a567-4ab6207a1942','map');



//    var childregions = $.data(dataCache, 'childregions')
//    console.log(childregions);



    document.getElementById('export-png').addEventListener('click', function() {
        gis.mainMap.once('postcompose', function(event) {
            var canvas = event.context.canvas;
            if (navigator.msSaveBlob) {
                navigator.msSaveBlob(canvas.msToBlob(), 'map.png');
            } else {
                canvas.toBlob(function(blob) {
                    saveAs(blob, 'map.png');
                });
            }
        });
        map.renderSync();
    });









//    gis.bufferEnterpriseByAirStation({
//        longitude:117.923056,
//        latitude:36.663889,
//        level:'Ⅳ',
//        direction:'东北偏北',
//        speed:'0.4'
//    },{
//        distance:10000
//    });



//    var lon=117.923056,lat=36.663889,
//        distance = 10000,
//        spatialdis = gis.destinationVincenty(lon,lat,45,distance);
//    var image = new ol.style.Circle({
//        radius: 5,
//        fill: null,
//        stroke: new ol.style.Stroke({color: 'red', width: 1})
//    });
//    $.ajax({
//        type: 'get',
//        url: '../api/datacenter/wastegas/bufferenterprises?key=3c4c1fe05b125209f9a50f00708097fbf73ba920449bde6f051a0d66f2f6997b&lon='+lon+ '&lat='+ lat + '&distance='+distance+'&spatialdis='+spatialdis,
//        dataType: 'json',
//        success: function(data) {
//
//            var enterpriseFeatures =(new ol.format.GeoJSON()).readFeatures(JSON.parse(data.enterpriseList));
//
//            enterpriseFeatures.push((new ol.format.WKT()).readFeature(data.bufferWKT));
//            var airFeature = new ol.Feature(new ol.geom.Point([lon,lat]));
//            airFeature.setProperties({type:'air'});
//            enterpriseFeatures.push(airFeature);
//
//            var vectorSource = new ol.source.Vector({
//                features: enterpriseFeatures
//            });
//
//            var vectorLayer = new ol.layer.Vector({
//                source: vectorSource,
//                style:function (feature) {
//                    var geometryType = feature.getGeometry().getType();
//                    if (geometryType.toUpperCase() == "POLYGON") {
//                        return new ol.style.Style({
//                            stroke: new ol.style.Stroke({
//                                color: 'blue',
//                                width: 1
//                            }),
//                            fill: new ol.style.Fill({
//                                color: 'rgba(255, 255, 0, 0.1)'
//                            })
//                        })
//                    } else if (geometryType.toUpperCase() == "POINT") {
//                        var property = feature.getProperties();
//                        if(property.hasOwnProperty('type')){
//                            return new ol.style.Style({
//                                image: new ol.style.Icon(({
//                                    src:"../static/spatial/images/air/1.png"
//                                }))
//                            })
//                        }
//                        return new ol.style.Style({
//                            image: new ol.style.Icon(({
//                                src:getPucture(property["industryCode"])
//                            }))
//                        })
//                    }
//                }
//            });
//            gis.mainMap.addLayer(vectorLayer);
//
//
//            gis.mainMap.getView().fit(vectorSource.getExtent(), gis.mainMap.getSize());
//
//            console.log("==========success========");
//            console.log(data)
//        },
//        error:function (error) {
//            console.log("==========error========");
//            console.log(error)
//        }
//    });



    function flash() {
        var features = gis.getLayByName('wastergas').getSource().getFeatures(),
            statusCode,
            point_overlay,
            overlayDiv;
        for(var i = 0,len = features.length;i < len;i++){
            statusCode = features[i].getProperties()['statusCode']
            if(statusCode > 0){
                overlayDiv = document.createElement('div');
                overlayDiv.classList.add('css_animation')
                point_overlay = new ol.Overlay({
                    element: overlayDiv,
                    positioning: 'center-center',
                    offset:[0,10]
                });
                point_overlay.setPosition(features[i].getGeometry().getCoordinates());
                gis.mainMap.addOverlay(point_overlay);
            }
        }
    }
</script>
</html>
